<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #fafafa;
            }
            
            .search_box {
                width: 100%;
                height: 43px;
                background-color: #fff;
                box-sizing: border-box;
                padding-left: 46px;
                padding-top: 7px;
                padding-right: 54px;
                position: relative;
                border: 1px solid #e8e8e8;
            }
            
            .search {
                width: 100%;
                height: 27px;
                line-height: 27px;
                box-sizing: border-box;
                padding-left: 31px;
                font-size: 13px;
                color: #999;
                background-color: #fff;
                border: 1px solid #e8e8e8;
                border-radius: 6px;
                background-image: url(../image/search.png);
                background-size: 15px 15px;
                background-repeat: no-repeat;
                background-position: 13px center;
            }
            
            .search input {
                width: 100%;
                height: 27px;
                line-height: 16px;
                outline: none;
                font-size: 13px;
            }
            
            .left {
                width: 46px;
                height: 43px;
                position: absolute;
                top: 0;
                left: 0;
                background-image: url(../image/pic22.png);
                background-size: 11px 19px;
                background-repeat: no-repeat;
                background-position: center center;
            }
            
            .right {
                width: 54px;
                height: 43px;
                font-size: 16px;
                color: #cacaca;
                line-height: 43px;
                text-align: center;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <div class="search_box" id="header">
            <div class="left event-back"></div>
            <div class="search">
                <input type="text" placeholder="请输入关键字...">
            </div>
            <div class="right" onclick="fnSearch();">搜索</div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnReady();
            fnReadyFrame();
        };
        var headHeight;

        function fnSearch() {
            headHeight = getHeaderHeight();
            api.openFrame({
                name: 'home_Search_frame',
                url: 'home_frame.html',
                bounces: true,
                rect: {
                    x: 0,
                    y: headHeight,
                    w: 'auto',
                    h: api.winHeight - headHeight
                }
            });
        }
    </script>

</html>
